<template>
  <div class="myselfWrite">
    <Header title="个人档案卡" />
    <div class="content">
      <li>
        <span>编号</span>
        <input type="text" disabled placeholder="PDB19881122HYLX" />
      </li>
      <li>
        <span>昵称</span>
        <input type="text" disabled="false" placeholder="请输入" />
      </li>
      <li>
        <span>姓名</span>
        <input type="text" disabled placeholder="赵建国" />
        <!-- <span style="float:right" class="iconfont icon-icon-test2"></span> -->
      </li>
      <li>
        <span>性别</span>
        <input type="text" placeholder="请选择" />
        <span style="float:right" class="iconfont icon-icon-test2"></span>
      </li>
      <li @click="hasBarthday=true">
        <span>生日</span>
        <input type="text" :placeholder="getRiqi.length?getRiqi.join('-'):'请输入'" disabled />
        <div class="brathday" v-show="hasBarthday">
          <li @click="getTime($event,0)">
            <span v-for="(item,index) in yearArr" :key="index">{{item}}</span>
          </li>
          <li @click="getTime($event,1)">
            <span v-for="item in Array.from(new Array(12).keys())" :key="item">{{item+1}}</span>
          </li>
          <li @click="getTime($event,2)">
            <span v-for="item in Array.from(new Array(30).keys())" :key="item">{{item+1}}</span>
          </li>
        </div>
        <span style="float:right" class="iconfont icon-icon-test2"></span>
      </li>
      <li>
        <span>年龄</span>
        <input type="text" disabled placeholder="根据出生年月计算" />
      </li>
      <li>
        <span>民族</span>
        <input type="text" placeholder="请选择" />
        <span style="float:right" class="iconfont icon-icon-test2"></span>
      </li>
      <li>
        <span>职业</span>
        <input type="text" placeholder="请输入" />
      </li>
      <li>
        <span>家庭住址</span>
        <input type="text" placeholder="请输入" />
      </li>
      <li>
        <span>身份证号</span>
        <input type="text" disabled placeholder="420982198801236015" />
      </li>
    </div>
    <button class="btn" @click="$router.push({ path: '/myself' })">保存</button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Header from "@/components/header.vue";
export default Vue.extend({
  data() {
    return {
      yearArr: [
        1996,
        1997,
        1998,
        1999,
        2000,
        2001,
        2002,
        2003,
        2004,
        2005,
        2006,
      ],
      getRiqi: [],
      hasBarthday: false,
    };
  },
  components: {
    Header,
  },
  methods: {
    getTime(arr: any, i: number) {
      if (arr.target.nodeName === "SPAN") {
        this.getRiqi[i] = arr.target.innerHTML;
        if (i === 2) {
          this.hasBarthday = false;
          this.$forceUpdate();
        }
        this.$forceUpdate();
      } else {
        return;
      }
    },
  },
});
</script>
<style scoped>
/* 生日 */
.brathday {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  height: 280px;
  text-align: center;
}
.brathday li {
  border: none;
  width: 33%;
  overflow: auto;
}
.brathday li:nth-child(5) {
  background: skyblue;
}
.brathday li span {
  float: left;
  width: 100%;
}
</style>